.step-list {
  width: 100%;
  ul {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    li {
      width: 100%;
      height: 24px;
      line-height: 24px;
      background: #ecedee;
      position: relative;
      list-style: none;
      color: #fff;
      text-align: center;
      font-size: 12px;
      color: #9b9fab;
      &:last-child {
        &::after {
          content: '';
          border: none;
        }
      }
      &:not(:first-child) {
        &::before {
          content: '';
          position: absolute;
          display: inline-block;
          width: 0;
          height: 0;
          left: 0;
          border-top: 12px solid transparent;
          border-left: 14px solid #fff;
          border-bottom: 12px solid transparent;
        }
      }
      &:not(:last-child) {
        &::after {
          content: '';
          z-index: 100;
        }
      }
      &::after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 0;
        height: 0;
        right: -14px;
        border-top: 12px solid transparent;
        border-left: 14px solid #ecedee;
        border-bottom: 12px solid transparent;
      }
    }
    li + li {
      margin-left: 4px;
    }
  }
}
.step-active {
  background: #3c6eff !important;
  color: #fff !important;
  &::after {
    content: '' !important;
    border-left: 14px solid #3c6eff !important;
  }
}
